<template>
  <view>
    <customtop :top_title="top_title"></customtop>
    <view class="post_show" v-if="!loading">
      <view class="" v-if="post.id">
        <view class="pagebox top_page" :style="{ marginTop: '0' }">
          <view class="title">{{post.title}}</view>
        </view>
        <view class="pagebox" @click="jumpPage('/pages/user/show?id=' + user.id)">
          <view class="pageuser">
            <image :src="user.avatar" class="avatar" />
            <view class="info">
              <view class="name">
                <span class="txt">{{user.nickname}}</span>
                <span class="auto_icons">
                  <i class="iconfont icon-viphuiyuan1 auth_icon_vip" v-if="user.vip == 1"></i>
                  <i class="iconfont icon-shimingrenzheng auth_icon_realname" v-if="user.realname_auth == 1"></i>
                  <i class="iconfont icon-qiyerenzheng auth_icon_company" v-if="user.company_auth == 1"></i>
                </span>
              </view>
              <view class="pageuser_types">
                <span class="type">{{user.city_shortname}}</span>
                <span class="type" v-if="user.company_shortname">{{user.company_shortname}}</span>
                <span class="type" v-if="user.job_title">{{user.job_title}}</span>
              </view>
            </view>
            <view class="more">
              <i class="iconfont icon-youbian"></i>
            </view>
          </view>
        </view>
        <view class="pagebox typelist">
          <view class="bd">
            <view class="item"><span>合作编号：</span><span>{{post.id}}</span></view>
            <view v-for="(item, index) in post.attributes" :key="index">
              <view class="item">
                <span>{{item.name}}：</span>
                <span
                  class="span_item"
                  v-for="(item_value, index_value) in item.values"
                  :key="index_value"
                >
                  {{item_value}}
                </span>
              </view>
            </view>
            <view class="item"><span>更新时间：</span><span>{{post.refresh_date}}</span></view>
          </view>
        </view>
        <view class="pagebox content">
          <view class="stitle"><span class="txt">详细介绍</span></view>
          <view class="bd">
            <rich-text :nodes="post.content"></rich-text>
          </view>
        </view>
        <view class="pagebox images" v-if="post.images.length > 0">
          <view class="stitle"><span class="txt">图片介绍</span></view>
          <view class="bd">
            <image
              mode="widthFix"
              :src="item.image"
              v-for="(item, index) in post.images"
              :key="index"
              @click="previewImages(item.image)"
            />
          </view>
        </view>
        <view class="pagebox contact">
          <view class="stitle"><span class="txt">联系方式</span></view>
          <view class="bd" v-if="contact.is_get_contact == 0">
            <button class="luckbtn luckbtn-default" @click="getContact_before">查看联系方式</button>
            <view class="remark_info" v-if="user_login.id">您当前为：<span class="text-danger">{{ user_login.vip == 1 ? 'VIP' : '普通' }}用户</span>，今日还有<span class="text-danger count_number">{{contact.today_get_contact_count}}</span>次查看权限</view>
          </view>
          <view class="bd" v-if="contact.is_get_contact == 1">
            <view class="contact_item">
              <span>微信：</span>
              <span class="span_items" v-if="post.contact.weixin != ''">
                <span>{{post.contact.weixin}}</span><u-icon class="u_icon" name="file-text" color="" size="" @click="copy(post.contact.weixin);"></u-icon>
              </span>
              <span v-if="post.contact.weixin == ''">未填写</span>
            </view>
            <view class="contact_item">
              <span>手机：</span>
              <span class="span_items" v-if="post.contact.phone != ''">
                <span>{{post.contact.phone}}</span><u-icon class="u_icon" name="file-text" color="" size="" @click="copy(post.contact.phone);"></u-icon>
              </span>
              <span v-if="post.contact.phone == ''">未填写</span>
            </view>
            <view class="contact_item">
              <span>Q Q：</span>
              <span class="span_items" v-if="post.contact.qq != ''">
                <span>{{post.contact.qq}}</span><u-icon class="u_icon" name="file-text" color="" size="" @click="copy(post.contact.qq);"></u-icon>
              </span>
              <span v-if="post.contact.qq == ''">未填写</span>
            </view>
            <view class="contact_item">
              <span>电话：</span>
              <span class="span_items" v-if="post.contact.telphone != ''">
                <span>{{post.contact.telphone}}</span><u-icon class="u_icon" name="file-text" color="" size="" @click="copy(post.contact.telphone);"></u-icon>
              </span>
              <span v-if="post.contact.telphone == ''">未填写</span>
            </view>
          </view>
        </view>
        <view class="pagebox post_list2 none">
          <view class="stitle"><span class="txt">同类型推荐</span></view>
          <view class="bd">
            <view v-if="posts.length > 0">
              <view class="items">
                <view class="item" v-for="(item, index) in posts" :key="index" @click="jumpPage('/pages/post/show?id=' + item.id)">
                  <view class="top">
                    <view class="title">{{item.title}}</view>
                  </view>
                  <view class="types">
                    <view class="type_item">
                      <span>编号：</span><span>{{item.id}}</span>
                    </view>
                    <view class="type_item">
                      <span>类目：</span><span>{{item.category_name}}</span>
                    </view>
                  </view>
                  <view class="item_foot">
                    <view class="user_info">
                      <view class="avatar"><image class="img" :src="item.user_avatar" /></view>
                      <view class="user_info_types">
                        <span class="type">{{item.user_nickname}}</span>
                        <span class="type" v-if="item.user_company_auth == 1">{{item.user_company_shortname}}</span>
                        <span class="type" v-if="item.user_job_title">{{item.user_job_title}}</span>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="pagebox guestbook">
          <view class="stitle"><span class="txt">合作留言</span></view>
          <view class="bd">
            <view class="items" v-if="contactLogs.length > 0">
              <view class="item" v-for="(item, index) in contactLogs" :key="index">
                <view class="top">
                  <view class="user_info2">
                    <view class="avatar">
                      <image class="img" :src="item.avatar" />
                    </view>
                    <span class="name">{{item.nickname}}</span>
                  </view>
                </view>
                <view class="mcontent">{{item.message}}</view>
                <view class="date">{{item.created_at}}</view>
              </view>
              <view class="uloadmore" @click="getMore"><u-loadmore :status="loadmore_status" loadmoreText="下拉/点击加载更多" /></view>
            </view>
            <u-empty
              v-if="contactLogs.length == 0"
              mode="data"
              icon="http://cdn.uviewui.com/uview/empty/data.png"
              text="暂无合作留言~"
            >
            </u-empty>
          </view>
        </view>

        <view v-if="!post.id">
          <u-empty
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            text="内容已下架~"
          >
          </u-empty>
        </view>
      </view>

      <view class="foot_action_blank"></view>
      <view class="foot_action" v-if="!loading">
        <view class="container">
          <view class="left">
            <view class="item" @click="switchTab('/pages/index/index')">
              <i class="iconfont icon-shouye"></i>
              <view class="txt">首页</view>
            </view>
            <view class="item" @click="collect" v-if="post.collect == 0">
              <i class="iconfont icon-shoucang"></i>
              <view class="txt">收藏</view>
            </view>
            <view class="item collected" @click="collect" v-if="post.collect == 1">
              <i class="iconfont icon-shoucang-shoucang"></i>
              <view class="txt">已收藏</view>
            </view>
            <view class="item share none">
              <i class="iconfont icon-fenxiang"></i>
              <view class="txt">分享</view>
              <view class="sharebtn"><u-button open-type="share" ></u-button></view>
            </view>
            <view class="item none" @click="createPyqImage">
              <i class="iconfont icon-pengyouquan"></i>
              <view class="txt">朋友圈</view>
            </view>
          </view>
          <view class="right">
            <view>
              <span class="msg" v-if="contact.is_get_contact == 1">已查看</span>
              <view class="btn" @click="getContact_before" v-if="contact.is_get_contact != 1">查看联系方式</view>
            </view>
          </view>
        </view>
      </view>

      <u-popup
        :show="kjhf_popup_show"
        @close="onClose_kjhf_popup"
      >
        <view class="kjhf_popup">
          <view class="title">快捷回复</view>
          <view class="items">
            <view class="item" :class="message == '合作' ? 'on' : ''" @click="setMessage('合作')">合作</view>
            <view class="item" :class="message == '你好，可以聊聊看' ? 'on' : ''" @click="setMessage('你好，可以聊聊看')">你好，可以聊聊看</view>
            <view class="item" :class="message == '我这边可以提供您需要的资源' ? 'on' : ''" @click="setMessage('我这边可以提供您需要的资源')">我这边可以提供您需要的资源</view>
          </view>
          <view class="luckbtn luckbtn-default" @click="getContact();">确认发表</view>
        </view>
      </u-popup>

      <u-popup
        mode="center"
        round="3"
        :show="contact_popup_show"
        @close="onClose_contact_popup"
      >
        <view class="contact_popup">
          <view class="box">
            <view class="tip1">今日免费次数已用完</view>
            <view class="tip2">可获取更多查看次数</view>
            <view class="btns">
              <button class="btn btn1" @click="getContact_one">单次查看</button>
              <button class="btn btn2" @click="switchTab('/pages/account/index')">开通会员</button>
            </view>
            <view class="tip3">单次查看需消耗{{config.contact_gold}}金币</view>
          </view>
        </view>
      </u-popup>
      <u-popup :show="pyq_img_show"
        custom-style="width: 690rpx; background-color: rgba(255, 255, 255, 0);"
        mode="center"
        @close="onClose_pyq_img"
        >
        <view class="pyq_img">
          <image class="img" :src="pyq_img" mode="widthFix" />
          <view class="btn">长按图片保存</view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import util from "@/utils/util.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      top_title: '',
      loading: true,
      post: {},
      user_login: {},
      user: {},
      category: {},
      contact: {},
      getContact_way: 1,
      pyq_img_origin: '',
      pyq_img: '',
      pyq_img_show: false,
      contact_popup_show: false,
      posts: [],
      config: {},

      contactLogs: [],
      loadmore_status: 'loadmore',
      loadmore_finished: false,
      params: {
        page_size: 15,
        page: 1,
      },

      kjhf_popup_show: false,
      message: '',
    }
  },

  onLoad: function (options) {
    let id = '';
    if (options.id != undefined) {
      id = options.id;
    } else if (options.scene != undefined) {
      let scene = decodeURIComponent(options.scene);
      let obj = util.urlToObj(scene);
      if (obj.id != undefined) {
        id = obj.id;
      }
    }

    request.post('/common/getConfig').then(res => {
      this.config = res.data;
    })
    this.id = id;
    uni.showLoading();
    this.getPost();
    this.getPostContactLogsPaginate();
  },

  onReachBottom() {
    this.getMore();
  },

  methods: {
    getPost: function() {
      request.post('/post/getPost', {id: this.id}).then(res => {
        uni.hideLoading();
        this.top_title = ( res.data.category.name ? res.data.category.name : '') + '详情';
        uni.setNavigationBarTitle({ title: ( res.data.category.name ? res.data.category.name : '') + '详情' });
        this.loading = false;
        this.post = res.data.post;
        this.user_login = res.data.user_login;
        this.user = res.data.user;
        this.contact = res.data.contact;

        this.getPosts_a();
      })
    },

    getContact: function() {
      uni.showLoading({ title: '获取中' });
      let params = {};
      params.id = this.id;
      params.way = this.getContact_way;
      params.message = this.message;
      request.post('/post/getContact', params).then(res => {
        uni.hideLoading();
        this.onClose_contact_popup();

        if (res.code == 4001) {
          this.contact_popup_show = true;
          return false;
        } else if (res.code == 400) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
          return false;
        }

        this.contact.is_get_contact = 1;
        this.post.contact = res.data;

        this.onClose_kjhf_popup();
        this.params.page = 1;
        this.contactLogs = [];
        this.getPostContactLogsPaginate();
      })
    },

    onClose_contact_popup: function() {
      this.contact_popup_show = false;
      this.getContact_way = 1;
    },

    getContact_one: function() {
      this.contact_popup_show = false;
      let that = this;
      uni.showModal({
        title: '提示',
        content: '单次查看将消耗' + that.config.contact_gold + '金币，确认查看？',
        success (res) {
          if (res.confirm) {
            that.getContact_way = 2;
            that.getContact();
          }
        }
      })
    },

    getPosts_a: function() {
      let params = {
        category_id: this.post.category_id
      };
      request.post('/post/getPosts_a', params).then(res => {
        this.posts = res.data;
      })
    },

    // 查看记录 留言记录
    getPostContactLogsPaginate: function() {
      let params = this.params;
      params.post_id = this.id;
      request.post('/post/getPostContactLogsPaginate', params).then(res => {
        uni.hideLoading();
        this.loading = false;
        if (res.data.total == 0) return false;

        if (res.data.current_page == 1) {
          this.contactLogs = res.data.data;
        } else {
          this.contactLogs = this.contactLogs.concat(res.data.data);
        }

        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        let params = this.params;
        params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
        this.params = params;
      })
    },

    // 查看记录 留言记录 更多
    getMore: function() {
      if (!this.loadmore_finished) {
        this.loadmore_status = 'loading';
        this.getPostContactLogsPaginate();
      }
    },

    // 收藏
    collect: function() {
      uni.showLoading();
      let params = {};
      params.post_id = this.id;
      request.post('/post/collect', params).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          let title = '已收藏';
          if (res.data != 1) title = '已取消收藏';
          uni.showToast({
            title: title,
            icon: 'none'
          })
          this.post.collect = res.data;
        } else if (res.code == 400) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
          return false;
        }
      })
    },

    createPyqImage: function() {
      uni.showLoading({ title: '生成中...' });
      request.post('/post/createPyqImage_h5', {id: this.id}, {responseType: 'arraybuffer'}).then(res => {
        uni.hideLoading()
        this.pyq_img_origin = res;
        this.pyq_img = 'data:image/png;base64,' + uni.arrayBufferToBase64(res);
        this.pyq_img_show = true;
      })
    },

    onClose_pyq_img() {
      this.pyq_img_show = false;
    },

    saveImage: function() {
      let that = this;
      var imgSrc =  uni.arrayBufferToBase64(that.pyq_img_origin);
      var save = uni.getFileSystemManager();
      var number = Math.random();
      var filePath = wx.env.USER_DATA_PATH + '/pic' + number + '.png';
      save.writeFile({
        filePath: filePath,
        data: imgSrc,
        encoding: 'base64',
        success: res => {
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success(res) {
              uni.showToast({
               title: '保存成功',
               mask: true
              });
              that.onClose_pyq_img();
            },
            fail(res) {
              uni.showToast({
               title: '保存失败',
               icon: 'error',
               mask: true
              });
            }
          })
        },
        fail(res) {
          console.error(res)
        }
      })
    },

    previewImages: function(current) {
      let urls = [];
      this.post.images.map((item, index) => {
        urls.push(item.image);
      })
      uni.previewImage({
        current: current,
        urls: urls
      })
    },

    getContact_before: function() {
      this.kjhf_popup_show = true;
    },

    onClose_kjhf_popup: function() {
      this.kjhf_popup_show = false;
    },

    setMessage: function(message) {
      this.message = message;
    },

    onShareAppMessage() {
      return {
        title: this.post.title,
        path: '/pages/post/show?id=' + this.post.id
      }
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url })
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    copy: function(content) {
      wx.setClipboardData({ data: content });
    },
  }
}
</script>

<style>
@import url("post.css");
page {
  padding-bottom: 40rpx;
}
.post_show .pagebox {
  padding: 30rpx 30rpx 32rpx 30rpx;
  background-color: #fff;
  overflow: hidden;
}
.post_show .pagebox {
  margin-top: 30rpx;
}
.post_show .pagebox .stitle {
  font-weight: 600;
  margin-bottom: 36rpx;
  letter-spacing: 1px;
  position: relative;
  padding-left: 26rpx;
}
.post_show .pagebox .stitle::before {
  position: absolute;
  top: 12rpx;
  left: 0;
  width: 10rpx;
  height: 20rpx;
  border-radius: 32rpx;
  background: #00B38A;
  content: '';
}
</style>
